<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>今天温度:{{temp}}度</h2>
        <h3>今天建议穿衣:{{suggestion}}</h3>
        <button @click="add">+</button>
        <button @click="minus">-</button>
    </template>
    <script>
        const App = {
            template: "#my-app",

            data() {
                const temp = 30
                return {
                    temp,
                    // suggestion: 
                }
            },
            methods: {
                add() {
                    this.temp += 5
                },
                minus() {
                    this.temp -= 5
                },
            },
            watch: {//侦听器
                temp: {
                    handler(newVal, oldVal) {
                        if (newVal >= 30) {
                            this.suggestion = '短袖'
                        } else if (newVal >= 5) {
                            this.suggestion = '夹克'
                        } else if (newVal <= 0) {
                            this.suggestion = '羽绒服'
                        }
                    },
                    immediate: true
                }
                
                // temp(newVal,oldVal){
                //     // console.log(newVal,oldVal);
                //     if (newVal >= 30) {
                //         this.suggestion = '短袖'
                //     }else if (newVal >= 5) {
                //         this.suggestion = '夹克'
                //     }else if (newVal <= 0) {
                //         this.suggestion = '羽绒服'
                //     }
                // }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>

</html>